<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js"></script>
    <script>
        function doAdd(){
            // $(html完整标签)  创建元素
            var li=$("<li>li05</li>");

            //子元素添加到父元素中
            // li.appendTo($("ul"));

            // 父元素添加子元素
            // $("ul").append(li);

            // $("ul").after($("<div>hello</div>"));
            // $("ul").before($("<div>hello</div>"));

            // $("<div>hello</div>").insertAfter($("ul"));

            $("li:eq(1)").click(function(){
                console.log("哈哈哈哈");
            });
        }
        function doRemove(){
            // $("ul li:eq(2)").remove();//删除元素
            $("ul li:eq(2)").empty();//清空元素

        }
        function doClone(){
            $("ul li:eq(1)").clone(true).appendTo($(".ul2"));//true克隆元素的同时克隆事件
        }
    </script>
</head>
<body>
    <input type="button" value="添加" onclick="doAdd()">
    <input type="button" value="删除" onclick="doRemove()">
    <input type="button" value="克隆" onclick="doClone()">
    <ul>
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
    </ul>
    <ul class="ul2">

    </ul>
</body>
</html>